<template>
  <div>
    <el-dialog
      :visible="visible"
      :title="title"
      :width="width"
      append-to-body
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="depotDataForm"
        :model="depotDataForm"
        :rules="rules"
        :disabled="operation === 0"
        label-width="125px"
        label-position="right"
        label-suffix=":"
      >

        <el-form-item :label="$t('outboundOrderLang.outDocNo')" prop="outboundNo">
          <el-input
            v-model="depotDataForm.outboundNo"
            type="textarea"
            :rows="4"
            :placeholder="$t('cutOffOrderLang.outOrderPleaseEnter')"
            clearable
            style="width: 50%"
          />
        </el-form-item>
        <el-form-item :label="$t('cutOffOrderLang.cutOffReason')" prop="interceptReason">
          <el-input
            v-model="depotDataForm.interceptReason"
            :placeholder="$t('cutOffOrderLang.cutOffReasonEnter')"
            clearable
            style="width: 50%"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="warning" plain size="small" @click="close">{{
          $t("cancel")
        }}</el-button>
        <el-button
          type="primary"
          size="small"
          :loading="submitLoading"
          @click="handleSubmit"
        >{{ $t("submit") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import to from 'await-to-js'
import { addIntercept } from '@/api/business/operateManage/intercept'
export default {
  name: 'DepotForm',
  props: {
    value: {
      type: Number,
      default: undefined
    },
    visible: {
      type: Boolean,
      default: undefined
    },
    operation: {
      type: Number,
      default: 0 // 0查看 1新增 2修改
    },
    title: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: '750px'
    }
  },
  data() {
    return {
      isVisible: false,
      submitLoading: false,
      depotDataForm: {
        outboundNo: null,
        interceptReason: null
      },
      rules: {
        outboundNo: {
          required: true,
          message: this.$t('cutOffOrderLang.outOrderPleaseEnter'),
          trigger: 'change'
        },
        interceptReason: {
          required: true,
          message: this.$t('cutOffOrderLang.cutOffReasonEnter'),
          trigger: 'change'
        }
      }
    }
  },
  watch: {
    value: {}
  },
  created() {
  },
  methods: {
    // 提交
    async handleSubmit() {
      const flag = await this.$confirm(
        this.$t('cutOffOrderLang.hint') + '<br>' + this.$t('cutOffOrderLang.confirmHint'),
        this.$t('hint'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning',
          dangerouslyUseHTMLString: true
        }
      ).catch((err) => err)
      if (flag === 'cancel') return
      const [err] = await to(this.$refs.depotDataForm.validate())
      if (err === null) {
        // 新增
        const res = await addIntercept(this.depotDataForm)
        if (res.data === null && res.returnCode === 10000) {
          this.$message.success(this.$t('handleSuccess'))
          await this.reset()
          this.$emit('close')
        } else {
          this.$message.error(res.returnMsg)
        }
      }
    },
    async reset() {
      this.depotDataForm = {
        outboundNo: null,
        interceptReason: null
      }
    },
    // 关闭
    close() {
      this.$emit('close')
    },
    closed() {
      this.reset()
    }
  }
}
</script>

<style></style>
